<style lang="less">
    .wj-clear {
        clear: left;
    }
    .icon-form-close {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 9;
    }
    .index {
        width: 200px;
        margin: auto;
        text-align: center;
    }

    .creator {
        width: 100px;
        height: 50px;
        line-height: 50px;
        background: #eee;
        border: 1px solid #ccc;
        margin: 10px auto;
    }
    .flows {
        height: auto;
        background: lavender;
        margin: auto;

        .flows-item {
            float: left;
            text-align: center;
        }
    }

    .left, .right, .edit {
        width: 500px;
        height: 800px;
        float: left;
        border: 1px solid #ccc;
    }
    .edit {
        text-align: left;
    }
    .font-bold {
        font-weight: bold;

        textarea.ivu-input {
            font-weight: bold;
        }
    }

    .color-red {
        color: red;

        textarea.ivu-input {
            color: red;
        }
    }

    .font-13 {
        font-size: 13px;

        textarea.ivu-input {
            font-size: 13px;
        }
    }
    .font-16 {
        font-size: 16px;

        textarea.ivu-input {
            font-size: 16px;
        }
    }
    .font-20 {
        font-size: 20px;

        textarea.ivu-input {
            font-size: 20px;
        }
    }


    .left {
        .left-content {
            div {
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                float: left;
                background: #eee;
                border: 1px solid #ccc;
            }
        }
    }
    .right {
        width: 800px;
        .right-item {
            min-height: 50px;
            line-height: 50px;
            width: 100%;
            text-align: left;
            display: flex;
            flex-direction: row;
            margin-bottom: 10px;
            border: 1px dashed #ccc;
            position: relative;

            .right-item-menu {
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: 1;
            }
            .right-children-container {
                width: 100%;

                .item {
                    height: 100%;
                    border: 1px dashed #ccc;
                    position: relative;

                    &.table {
                        border: 1px solid #000;
                    }

                    &.one {
                        width: 100%;
                    }

                    &.three {
                        width: calc(100% / 3);
                    }

                    &.two {
                        width: 50%;
                    }

                    &.four {
                        width: 25%;
                    }

                    &.five {
                        width: 20%;
                    }

                    &.six {
                        width: calc(100% / 6);
                    }

                    &.active {
                        border: 1px dashed red;
                    }
                }
            }


            &.empty {
                border: 1px dashed red;
            }
        }
    }
    .right-item-children {
        display: flex;
        flex-direction: row;
        margin-bottom: 10px
    }
    .edit-title {
        text-align: left;
        font-weight: bold;
        padding: 10px;
    }
    .tree-children {
        width: 30%;
    }
    #myPrintArea {
        display: none;
    }
    @media print {
        #myPrintArea {
            display: block;
        }
    }
    .pull-left {
        float: left;
    }
</style>
<template>
    <div style="text-align: center">
        <div class="left">
            <div class="left-title">
                <RadioGroup v-model="left_tab">
                    <Radio label="form">
                        <span>字段控件</span>
                    </Radio>
                    <Radio label="table">
                        <span>布局控件</span>
                    </Radio>
                    <Radio label="data">
                        <span>数据控件</span>
                    </Radio>
                </RadioGroup>
            </div>
            <div class="left-content">
                <div draggable="true"
                     v-if="left_tab === 'form'"
                     v-for="item in left_forms"
                     :key="item.type"
                     @dragstart="onDragStart($event, item.type + ':' + item.title)"
                >{{item.title}}</div>
                <div draggable="true"
                     v-if="left_tab === 'table'"
                     v-for="item in left_tables"
                     :key="item.type"
                     @dragstart="onDragStart($event, item.type + ':' + item.title)"
                >{{item.title}}</div>
                <div draggable="true"
                     v-if="left_tab === 'data'"
                     v-for="item in left_datas"
                     :key="item.type"
                     @dragstart="onDragStart($event, item.type + ':' + item.title)"
                >{{item.title}}</div>
            </div>

        </div>
        <div class="right"  @dragover="onDragOver"  @dragenter="onDragEnterContainer" @dragleave="onDragLeaveContainer" @drop.self="onDropContainer">
            <div class=  "right-item"
                 :type="item.type"
                 :class="{empty: !item.type}"
                 v-for="(item, index) in right_forms"
                 :key="index"
                 :draggable="item.draggable && !!item.type"
                 @dragstart.self="onDragStart($event, item.type + ':' + item.title, item.token, index)"
                 @drop="onDrop($event, index)"
                 @dragenter="onDragEnter($event, index)"
                 @dragleave="onDragLeave($event, index, item.type)"
                 @dragend.self="onDragEnd"
                 @click="onEdit(item.type, index, '', '')"
            >
                <Icon type="close-circled" v-if="['detail', 'table'].indexOf(item.type) === -1" @click.native="onDeleteForm(index)" class="icon-form-close"></Icon>
                <form-item :form_item="item" ></form-item>
                <ButtonGroup class="right-item-menu" size="small" v-if="['detail', 'table'].indexOf(item.type) !== -1">
                    <Button>{{item.type === 'detail' ? '编辑明细表' : '编辑表格'}}</Button>
                    <Button @click.native="onAddCol(item.type, index)">添加列</Button>
                    <Button v-if="item.type === 'table'" @click.native="onAddRow(index)">添加行</Button>
                    <Button @click.native="onDeleteForm(index)">删除表格</Button>
                </ButtonGroup>

                <div class="right-children-container" v-if="['table', 'employee_change', 'salary_adjust'].indexOf(item.type) ===  -1 && !!item.children">
                    <div class="item pull-left"
                         :class="{one: item.children.length === 1,two: item.children.length === 2, three: item.children.length === 3, four: item.children.length === 4,
                         five: item.children.length === 5, six: item.children.length === 6, table: item.type === 'table' || item.type === 'detail'}"
                         v-for="(val ,i) in item.children"
                         :key="i"
                         :draggable="!!val.type"
                         @dragstart.self="onDragStart($event, val.type + ':' + val.title, val.token)"
                         @drop="onDropChildren($event, index, i)"
                         @dragenter="onDragEnterChildren"
                         @dragleave="onDragLeaveChildren"
                         @click="onEdit(val.type, index, '', i, $event)"
                    >
                        <Icon type="close-circled" @click.native="onDeleteChildrenForm(index, i)" class="icon-form-close"></Icon>
                        <form-item :form_item="val"></form-item>
                    </div>
                    <div class="wj-clear"></div>
                </div>
                <table  class="right-children-container" v-else-if="[ 'table', 'employee_change', 'salary_adjust'].indexOf(item.type) !== -1">
                    <tr v-for="(row, rowIndex) in item.children" :key="rowIndex">
                         <td class="item"
                              :class="{one: row.length === 1,two: row.length === 2, three: row.length === 3, four: row.length === 4,
                         five: row.length === 5, six: row.length === 6, table: item.type === 'table' || item.type === 'detail'}"
                              v-for="(val ,i) in row"
                              :key="i"
                             :draggable="val.draggable && !!val.type"
                              @dragstart.self="onDragStart($event, val.type + ':' + val.title, val.token)"
                              @drop="onDropTableChildren($event, index, rowIndex, i)"
                              @dragenter="onDragEnterChildren"
                              @dragleave="onDragLeaveChildren"
                              @click="onEdit(val.type, index,rowIndex, i, $event)"
                         >
                             <form-item :form_item="val"></form-item>
                        </td>
                        <div class="wj-clear"></div>
                    </tr>
                </table>

            </div>
        </div>
        <div class="edit">
            <span v-if="!currentType || currentType === 'two' || currentType === 'three'">请选中字段控件或数据控件</span>
            <span v-else-if="currentType !== 'line'">
                <span v-if="currentType !== 'describe'">
                    <!--1-->
                    <div class="edit-title">标题</div>
                    <Input v-model="currentOptions.title"></Input>
                    <!--2-->
                    <div class="edit-title">描述</div>
                    <Input v-model="currentOptions.describe"></Input>
                    <!--3-->
                    <div class="edit-title">标题布局</div>
                    <RadioGroup v-model="currentOptions.title_style">
                        <Radio label="row">横排</Radio>
                        <Radio label="col">竖排</Radio>
                    </RadioGroup>
                    <!--4-->
                    <span v-if="currentType !== 'math' && currentType !== 'table'">
                        <div class="edit-title">必填项设置</div>
                        <Checkbox v-model="currentOptions.required">这是必填项</Checkbox>
                    </span>
                    <!--5-->
                     <span
                             v-if="currentType === 'radio' ||
                             currentType === 'checkbox' ||
                             currentType === 'select' ||
                             currentType === 'employee_change_type' ||
                             currentType === 'employee_change_result' ||
                               currentType === 'salary_adjust_reason' ||
                                 currentType === 'salary_adjust_item'">
                        <div class="edit-title">选项设置</div>
                        <div v-for="(item, index) in currentOptions.list"  :key="item.value">
                            <Input v-model="item.label"></Input>
                            <Icon type="plus-circled" size="30" @click.native="onAdd"></Icon>
                            <Icon type="minus-circled" size="30" @click.native="onDel(index)"></Icon>
                        </div>
                     </span>
                    <!--6-->
                     <span v-if="currentType !== 'describe'">
                        <div class="edit-title">设置</div>
                        <Checkbox v-model="currentOptions.hide_title">隐藏标题</Checkbox>
                        <Checkbox v-model="currentOptions.show_order" v-if="currentType === 'detail'">显示序号</Checkbox>
                     </span>
                    <!--7-->
                     <span v-if="currentType === 'number'">
                        <div class="edit-title">数值类型</div>
                        <RadioGroup v-model="currentOptions.num_format">
                            <Radio label="number">数值</Radio>
                            <Radio label="percent">百分比</Radio>
                        </RadioGroup>
                     </span>
                    <!--8-->
                    <span v-if="currentType === 'datepicker' || currentType === 'employee_change_effect' || currentType === 'salary_adjust_effect'">
                        <div class="edit-title">格式</div>
                        <RadioGroup v-model="currentOptions.date_formate">
                            <Radio label="datetime">年-月-日 时:分</Radio>
                            <Radio label="date">年-月-日</Radio>
                            <Radio label="month">年-月</Radio>
                        </RadioGroup>
                    </span>
                    <!--9-->
                    <div class="math-panel" v-if="currentType === 'math'">
                        <div class="edit-title">计算面板</div>
                        <div><span>字段</span>
                        <span v-for="item in mathArr" :key="item.token"  @click="onAddMathItem(item.title, item.token)">{{item.title}}</span>
                        </div>
                        <div><span>常量</span><Input style="width: 100px" v-model="constValue"></Input><Button @click="onAddMathItem(constValue)">确认</Button></div>
                        <div>
                            <span>运算符</span>
                            <Button @click.native="onAddMathItem('+')">+</Button>
                            <Button @click.native="onAddMathItem('-')">-</Button>
                            <Button @click.native="onAddMathItem('*')">*</Button>
                            <Button @click.native="onAddMathItem('/')">/</Button>
                            <Button @click.native="onAddMathItem('(')">(</Button>
                            <Button @click.native="onAddMathItem(')')">)</Button>
                        </div>
                        <div><span>计算式</span><Button @click="cancelMathItem">撤销</Button><Button @click="clearMathFormula">清空</Button></div>
                        <div>{{mathFormula}}</div>
                        <div><Button>取消</Button><Button>确认</Button></div>
                    </div>

                    <!--11-->
                    <span v-if="['input', 'textarea', 'radio', 'checkbox', 'select', 'money', 'number', 'datetime', 'employee_change_reason', 'employee_change_type', 'employee_change_result', 'employee_change_effect',
                    'salary_adjust_reason', 'salary_adjust_item', 'salary_adjust_result', 'salary_adjust_effect'].indexOf(currentType) !== -1">
                        <div class="edit-title">默认提示</div>
                        <Input v-model="currentOptions.placeholder"></Input>
                    </span>
                    <!--12-->
                    <span v-if="currentType === 'detail'">
                        <div class="edit-title">合计字段</div>
                        <CheckboxGroup v-model="currentOptions.totals">
                            <Checkbox v-for="item in totalsArr" :key="item.token" :label="item.token">{{item.title}}</Checkbox>
                        </CheckboxGroup>
                    </span>
                    <!--13-->
                    <span v-if="currentType === 'employee_change_type'">
                        <div class="edit-title">切换组件类型</div>
                        <RadioGroup v-model="currentOptions.employee_change_type"  >
                            <Radio label="select">下拉菜单</Radio>
                            <Radio label="fixed">固定值</Radio>
                        </RadioGroup>
                        <div v-if="currentOptions.employee_change_type === 'fixed'">
                            <Select style="width:200px" v-model="currentOptions.employee_change_value">
                                <Option v-for="val in employeeChangeType" :value="val.value"  :key="val.value">{{val.label}}</Option>
                            </Select>
                        </div>
                          <Checkbox v-model="currentOptions.employee_change_show">显示</Checkbox>
                    </span>
                </span>
                <span v-else>
                    <!--10-->
                    <div class="edit-title">格式</div>
                    <Checkbox v-model="currentOptions.bold" class="font-bold">B</Checkbox>
                    <Select v-model="currentOptions.color" style="width:50px">
                        <Option value="black">黑</Option>
                        <Option value="red">红</Option>
                    </Select>
                    <Select v-model="currentOptions.font_size" style="width:50px">
                        <Option value="13">13</Option>
                        <Option value="16">16</Option>
                        <Option value="20">20</Option>
                    </Select>
                    <Input
                            class="edit-preview"
                            :class="{
                                'color-red': currentOptions.color === 'red',
                                'font-13': currentOptions.font_size === '13',
                                 'font-16': currentOptions.font_size === '16',
                                 'font-20': currentOptions.font_size === '20',
                                 'font-bold': currentOptions.bold
                            }"
                            type="textarea"
                            v-model="currentOptions.descriptive_text"
                    ></Input>
                </span>
            </span>
        </div>


        <input id="biuuu_button" type="button" value="打印"></input>
        <div id="myPrintArea">
            <div style="width: 500px; height: 800px; border: 1px solid red">.....文本打印部分1.....</div>
            <div style="page-break-after: always;"></div>
            <div class="quote_title"  style="width: 500px; height: 800px; border: 1px solid red">引用</div><div class="quote_div"></div>
        </div>

        <Checkbox v-model="showPreview">预览</Checkbox>


            <preview-form
                    ref="preview_form"
                    v-if="showPreview"
                    @getData="getData"
                    @delete="onDeleteDetail"
                    v-for="(item, index) in right_forms"
                    :key="index"
                    :form_item="item"
                    :index="index"
                    :total_results="total_results"
                    @setDetailMath="getDetailMath"
            >
            </preview-form>

    </div>



</template>
<script>
    import previewForm from './preview-form.vue';
    import formItem from './form-item.vue';
    import Input from "../../node_modules/iview/src/components/input/input.vue";
    import index from "../store/index";
    export default {
        components: {
            Input,
            previewForm, formItem
        },
        data() {
            return {showPreview: false,
                left_forms: [
                    {title: '单行文本输入框', type: 'input'},
                    {title: '多行文本框', type: 'textarea'},
                    {title: '描述性文字', type: 'describe', placeholder: '描述性文字'},
                    {title: '分割线', type: 'line'},
                    {title: '单选', type: 'radio'},
                    {title: '复选', type: 'checkbox'},
                    {title: '下拉菜单', type: 'select'},
                    {title: '金额', type: 'money'},
                    {title: '数字', type: 'number'},
                    {title: '运算控件', type: 'math'},
                    {title: '日期', type: 'datepicker'},
                    {title: '附件', type: 'file'},
                    {title: '关联表单', type: 'form'},
                    {title: '表格', type: 'table'},
                    {title: '明细表', type: 'detail'}
                ],
                left_tables: [
                    {title: '一行两列', type: 'two'},
                    {title: '一行三列', type: 'three'}
                ],
                left_datas: [
                    {title: '人员异动', type: 'employee_change'},
                    {title: '薪资调整', type: 'salary_adjust'}
                ],
                dragTarget: '',
                right_forms: [],
                targetY: 0,
                token: 0,
                currentType: '',
                currentIndex: '',
                startIndex: '',             //被拖拽元素Index
                currentChildrenIndex: '',
                currentRowIndex: '',
                currentOptions: {
                    totals: []
                },
                showEdit: false,
                list: [],
                date_formate: '',
                left : true,
                inside: false,
                left_tab: 'form',
                employeeChangeType: [
                    {value: 'hired', label: '转正'},
                    {value: 'change', label: '调动'},
                    {value: 'leave', label: '离职'},
                    {value: 'promote', label: '晋升'}
                ],
                salaryAdjustReason: [
                    {value: 'hired', label: '转正调薪'},
                    {value: 'change', label: '任职变动'},
                    {value: 'promote', label: '年限晋级'},
                    {value: 'all', label: '公司普调'}
                ],
                data_example: {
                    type: '控件类型',
                    title: '标题',
                    describe: '描述',
                    title_style: '标题布局',                //row 横向 col 纵向
                    required: '是否必填',
                    list: '选项',              //select radio checkbox 使用
                    hide_title: '隐藏标题',
                    show_order: '显示序号',
                    num_format: '数据类型',             //number 数值 percent 百分比
                    date_formate: '时间格式',               //datetime年月日 时分 date年月日 month年月
                    math_formula: '运算式',
                    math_formula_arr: [],
                    placeholder: '提示',
                    totals: '合计项',
                    employee_change_type: '人员变动类型',     //select下拉菜单选择 fixed 固定值
                    employee_change_value: '固定项值',          //hire 转正 leave离职 change 调动 promote 晋升
                    employee_change_show: '是否显示',
                    color: '字体颜色',              //red红black黑
                    font_size: '字体大小',              // 5 4 3

                },
                testData: {},
                constValue: '',
                mathFormula: '',                //运算式
                mathFormulaArr: [],
                mathFormulaTokenArr: [],                //token 运算式 数组
                strArr: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
                res_use: [
                    {
                        type: 'radio',
                        title: '物品用途',
                        token: 'use_for',
                        list: [
                            {
                                label: '一般办公室用',
                                value: 'office'
                            },
                            {
                                label: '固定资产',
                                value : 'fixed'
                            },
                            {
                                label: '其他',
                                value: 'other'
                            }
                        ]

                    },
                    {
                        type: 'detail',
                        title: '物品明细',
                        totals: ['number'],
                        children: [
                            {
                                type: 'input',
                                title: '物品名称',
                                token: 'name'
                            },
                            {
                                type: 'input',
                                title: '单位',
                                token: 'unit'
                            },
                            {
                                type: 'input',
                                title: '领用数量',
                                token: 'number'
                            }
                        ]
                    }
                ],              //物品领用单
                total_results: {},               //详情表合计数汇总
                expense: [
                    {
                        type: 'money',
                        title: '报销金额',
                        token: 'sum'
                    },
                    {
                        type: 'number',
                        title: '发票数量',
                        token: 'receipt_number'
                    },
                    {
                        type: 'select',
                        title: '报销类别',
                        token: 'genre',
                        list: [
                            {
                                label: '招待费',
                                value: 'entertainment'
                            },
                            {
                                label: '活动费',
                                value: 'activity'
                            },
                            {
                                label: '其他',
                                value: 'other'
                            }
                        ]
                    },
                    {
                        type: 'textarea',
                        title: '报销原因',
                        token: 'reason'
                    },
                    {
                        type: 'file',
                        title: '附件',
                        token: 'file'
                    }
                ],                  //报销单
                agreement: [
                    {
                        type: 'two',
                        children: [
                            {
                                type: 'input',
                                title: '编号',
                                token: 'no'
                            },
                            {
                                type: 'input',
                                title: '合同名称',
                                token: 'name'
                            }
                        ]
                    },
                    {
                        type: 'two',
                        children: [
                            {
                                type: 'input',
                                title: '对方单位名称',
                                token: 'opposite_name'
                            },
                            {
                                type: 'input',
                                title: '对方负责人',
                                token: 'opposite_leader'
                            }
                        ]
                    },
                    {
                        type: 'detail',
                        title: '合同条款',
                        children: [
                            {
                                type: 'input',
                                title: '说明',
                                token: 'explain'
                            }
                        ]
                    },
                    {
                        type: 'file',
                        title: '附件',
                        token: 'file'
                    }
                ],
                purchase: [
                    {
                        type: 'textarea',
                        title: '申请事由',
                        token: 'reason'
                    },
                    {
                        type: 'two',
                        children: [
                            {
                                type: 'select',
                                title: '采购类型',
                                token: 'type',
                                list: [
                                    {
                                        label: '办公用品',
                                        value: 'office'
                                    },
                                    {
                                        label: '生产原料',
                                        value: 'production'
                                    },
                                    {
                                        label: '其他',
                                        value: 'other'
                                    }
                                ]
                            },
                            {
                                type: 'date',
                                title: '期望交付日期',
                                token: 'date_pay'
                            }
                        ]
                    },
                    {
                        type: 'detail',
                        title: '采购明细',
                        totals: ['sum'],
                        children: [
                            {
                                type: 'input',
                                title: '名称',
                                token: 'name'
                            },
                            {
                                type: 'input',
                                title: '规格',
                                token: 'format'
                            },
                            {
                                type: 'input',
                                title: '单位',
                                token: 'unit'
                            },
                            {
                                type: 'number',
                                title: '数量',
                                token: 'number'
                            },
                            {
                                type: 'money',
                                title: '价格',
                                token: 'price'
                            },
                            {
                                type: 'math',
                                title: '总价',
                                token: 'sum',
                                math_formula: ''
                            }
                        ]
                    }

                ],
                business: [
                    {
                        type: 'input',
                        title: '地点',
                        token: 'place'
                    },
                    {
                        type: 'textarea',
                        title: '出差事由',
                        token: 'reason'
                    },
                    {
                        type: 'date',
                        title: '开始',
                        token: 'date_start'
                    },
                    {
                        type: 'date',
                        title: '结束',
                        token: 'date_end'
                    },
                    {
                        type: 'math',
                        title: '时长',
                        token: 'length'
                    }
                ],
                out: [
                    {
                        type: 'input',
                        title: '地点',
                        token: 'place'
                    },
                    {
                        type: 'textarea',
                        title: '出差事由',
                        token: 'reason'
                    },
                    {
                        type: 'date',
                        title: '日期',
                        token: 'date'
                    },
                    {
                        type: 'select',
                        title: '类型',
                        token: 'type',
                        list: [
                            {value:1,label:'正常打卡'},
                            {value:2,label:'免上班卡'},
                            {value:3,label:'免下班卡'},
                            {value:4,label:'免全天卡'}
                        ]
                    }
                ],
                over_work: [
                    {
                        type: 'select',
                        title: '类型',
                        token: 'type',
                        list: [
                            {value:1,label:'工作日加班'},
                            {value:2,label:'公休日加班'},
                            {value:3,label:'节假日加班'}
                        ]
                    },
                    {
                        type: 'textarea',
                        title: '加班事由',
                        token: 'reason'
                    },
                    {
                        type: 'date',
                        title: '开始',
                        token: 'date_start'
                    },
                    {
                        type: 'date',
                        title: '结束',
                        token: 'date_end'
                    },
                    {
                        type: 'math',
                        title: '时长',
                        token: 'length'
                    }
                ],
                re_sign: [
                    {
                        type: 'date',
                        title: '日期',
                        token: 'date'
                    },
                    {
                        type: 'textarea',
                        title: '补签事由',
                        token: 'reason'
                    }
                ],
                detailData: {},             //明细表改造后的children数据
            }
        },
        mounted() {
            $("#biuuu_button").click(function () {
                $("#myPrintArea").printArea();
            });
        },
        methods: {
            /*
            * 拖拽开始
            */
            onDragStart(e, id, token, index) {
                e.dataTransfer.effectAllowed = 'copy';
                e.dataTransfer.setData('text/plain', id);
                if(token) {
                    this.token = token;
                    this.left = false;
                    this.startIndex = index;
                }else {
                    this.left = true;
                }
            },
            onDragOver(e) {
                if(e.preventDefault) {
                    e.preventDefault();
                }
                e.dataTransfer.dropEffect = 'copyMove';
                this.targetY = e.y;
                return false;
            },
            onDragEnter(e, index) {
                if (e.y >= this.targetY) {
                    if(!!this.right_forms[index - 1] && !this.right_forms[index - 1].type) {
                        this.right_forms.splice(index - 1, 1);
                        if(!this.right_forms[index -1].children) {
                            this.right_forms.splice(index, 0, {type: '', title: '', index: ''});
                        }
                    }
                }else {
                    if(!!this.right_forms[index + 1] && !this.right_forms[index + 1].type) {
                        this.right_forms.splice(index + 1, 1);
                        if(!this.right_forms[index].children) {
                            this.right_forms.splice(index, 0, {type: '', title: '', index: ''});
                        }
                    }
                }
            },
            /**
             * 拖拽离开目标
             * @param e
             * @param index
             */
            onDragLeave(e, index, type) {
                if(this.startIndex === index) {
                    return null;
                }
                const check_type = ['three', 'two', 'table', 'detail'].indexOf(type) !== -1;        //判断目标是否为表格类控件
                const check_table_down = (check_type && e.y > e.target.offsetTop + 25) || !check_type;       //判断是否从底部离开时，表格类插件要额外判断光标是否处于目标控件div下半部分
                const check_table_up = (check_type && e.y < e.target.offsetTop + 25) || !check_type;       //判断是否从顶部离开时，表格类插件要额外判断光标是否处于目标控件div上半部分
                //判断目标控件是否已被拖拽入内容
                if(!!this.right_forms[index] && !!this.right_forms[index].type) {
                    if ((e.y > this.targetY && ((this.right_forms.length > index + 1 && !!this.right_forms[index + 1].type) || this.right_forms.length === index + 1)) && check_table_down) {
                        this.right_forms.splice(index + 1, 0, {type: '', title: '', index: ''});
                    } else if(e.y < this.targetY && ((index > 0 && !!this.right_forms[index - 1].type) || index === 0) && check_table_up) {
                        if (index > 0) {
                            this.right_forms.splice(index, 0, {type: '', title: '', index: ''});
                        } else {
                            this.right_forms.unshift({type: '', title: '', index: ''});
                        }
                    }
                }
            },
            /**
             * 拖拽放置
             * @param e
             * @param index
             * @param i
             */
            onDrop(e, index) {
                if(e.preventDefault) {
                    e.preventDefault();
                }
                this.inside = false;
                const text = e.dataTransfer.getData('text/plain');
                const type = text.split(':')[0];
                const title = text.split(':')[1];
                //拖拽表单元素
                if(['three', 'two', 'table', 'detail', 'employee_change', 'salary_adjust'].indexOf(type) === -1) {
                    this.$set(this.right_forms, index, {
                        type: type,
                        title: title,
                        placeholder: type === 'describe' ? '描述性文字' : '',
                        token: this.getRandomString(),
                        list: this.makeList(type),
                        draggable: true
                    });
                }
                //拖拽布局容器
                else if(type === 'three'){
                    this.$set(this.right_forms, index, {
                        type: 'three',
                        title: '',
                        token: '',
                        draggable: false,
                        children: []
                    });
                    for (let i = 0; i < 3; i++) {
                        this.right_forms[index].children.push({type: '', title: '', draggable: true});
                    }
                }
                else if(type === 'two' || type === 'detail'){
                    this.$set(this.right_forms, index, {
                        type: type,
                        title: '',
                        token: '',
                        draggable: false,
                        children: []
                    });
                    for (let i = 0; i < 2; i++) {
                        this.right_forms[index].children.push({type: '', title: '', draggable: true});
                    }
                }
                else if(type === 'table') {
                    this.$set(this.right_forms, index, {
                        type: 'table',
                        title: '',
                        token: '',
                        draggable: false,
                        children: []
                    });
                    for (let i = 0; i < 2; i++) {
                        this.right_forms[index].children.push([{type: '', title: '', draggable: true},{type: '', title: '', index: '', draggable: true}]);
                    }
                }
                else if(type === 'employee_change') {
                    this.$set(this.right_forms, index, {
                        type: 'employee_change',
                        title: '',
                        token: this.getRandomString(),
                        draggable: true,
                        children: []
                    });
                    this.right_forms[index].children.push(
                        [{
                            type: 'employee_change_type',
                            title: '异动类型',
                            token: this.getRandomString() + 1,
                            list: this.employeeChangeType,
                            draggable: false,
                            employee_change_type: 'select',
                            employee_change_show: true
                        }],
                        [{
                            type: 'employee_change_result',
                            title: '异动结果',
                            token: this.getRandomString() + 2,
                            list: [],
                            draggable: false
                        }],
                        [{
                            type: 'employee_change_effect',
                            title: '生效日期',
                            token: this.getRandomString() + 3,
                            list: [],
                            draggable: false
                        }],
                        [{
                            type: 'employee_change_reason',
                            title: '原因说明',
                            token: this.getRandomString() + 4,
                            list: [],
                            draggable: false
                        }]
                    );
                }
                else if(type === 'salary_adjust') {
                    this.$set(this.right_forms, index, {
                        type: 'salary_adjust',
                        title: '',
                        token: this.getRandomString(),
                        draggable: true,
                        children: []
                    });
                    this.right_forms[index].children.push(
                        [{
                            type: 'salary_adjust_reason',
                            title: '调整原因',
                            token: this.getRandomString() + 1,
                            list: this.salaryAdjustReason,
                            draggable: false
                        }],
                        [{
                            type: 'salary_adjust_item',
                            title: '调整项目',
                            token: this.getRandomString() + 2,
                            list: [],
                            draggable: false
                        }],
                        [{
                            type: 'salary_adjust_result',
                            title: '调整结果',
                            token: this.getRandomString() + 3,
                            list: [],
                            draggable: false
                        }],
                        [{
                            type: 'salary_adjust_effect',
                            title: '生效日期',
                            token: this.getRandomString() + 4,
                            list: [],
                            draggable: false
                        }]
                    );
                }
                this.clearDrop();
                $(e.target).removeClass('active');
                this.onEdit(type, index, '', '');
            },
            onDragEnd(e) {

            },
            onDragEnterChildren(e) {
                $(e.target).addClass('active');
            },
            onDragLeaveChildren(e) {
                $(e.target).removeClass('active');
            },
            /**
             *
             * @param e
             * @param index
             * @param i
             */
            onDropChildren(e, index, i) {
                if(e.preventDefault) {
                    e.preventDefault();
                }
                this.inside = false;
                const text = e.dataTransfer.getData('text/plain');

                const type = text.split(':')[0];
                const title = text.split(':')[1];

                if(this.right_forms[index].type === 'detail') {
                    if(['three', 'two', 'table', 'detail', 'employee_change', 'salary_adjust', 'describe', 'line'].indexOf(type) !== -1) {
                        return null;
                    }
                }else {
                    if(['three', 'two', 'table', 'detail', 'employee_change', 'salary_adjust'].indexOf(type) !== -1) {
                        return null;
                    }
                }


                this.$set(this.right_forms[index].children, i, {
                    type: type,
                    title: title,
                    placeholder: type === 'describe' ? '描述性文字' : '',
                    token: this.getRandomString(),
                    list: this.makeList(type),
                    draggable: true
                });
                this.clearDrop();
                $(e.target).removeClass('active');
                this.onEdit(type, index, '', i);
            },
            onDragEnterContainer(e) {
                if(!this.left || this.inside) {
                    return null;
                }
                this.inside = true;
                if(!this.right_forms.length || !!this.right_forms[this.right_forms.length - 1].type) {
                    this.right_forms.push({type: '', title: '', index: ''})
                }
            },
            onDragLeaveContainer(e) {
                if(!this.left || this.inside) {
                    return null;
                }
                this.right_forms = this.right_forms.filter(item => {
                    return item.type !== '';
                })
            },
            onDropContainer(e) {
                if(!this.left) {
                    return null;
                }
                this.onDrop(e, this.right_forms.length - 1)
            },
            /**
             *
             * @param type
             * @param index
             * @param rowIndex
             * @param i
             * @param e
             */
            onEdit(type, index,rowIndex, i, e) {
                //如果提供了事件对象，则这是一个非IE浏览器
                if ( e && e.stopPropagation ) {
                    //因此它支持W3C的stopPropagation()方法
                    e.stopPropagation();
                }else {
                //否则，我们需要使用IE的方式来取消事件冒泡
                    window.event.cancelBubble = true;
                }
                this.showEdit = true;
                this.currentType = type;
                this.currentIndex = index;
                this.currentChildrenIndex = i;
                this.currentRowIndex= rowIndex;
                if(!this.right_forms[index] || !this.right_forms[index].children && i !== '') {
                    index--;
                }
                this.currentOptions = rowIndex !== '' ? this.right_forms[index].children[rowIndex][i] : i !== '' ? this.right_forms[index].children[i] : this.right_forms[index];
                if(type === 'radio' || type === 'checkbox' || type === 'select') {
                    if(rowIndex !== '') {
                        this.currentOptions.list = this.right_forms[this.currentIndex].children[rowIndex][i].list;
                    } else {
                        if (this.currentChildrenIndex !== '') {
                            this.currentOptions.list = this.right_forms[this.currentIndex].children[this.currentChildrenIndex].list;
                        } else {
                            this.currentOptions.list = this.right_forms[this.currentIndex].list;
                        }
                    }
                }
            },
            /**
             * 添加选项
             */
            onAdd() {
                this.currentOptions.list.push({label: '选项' + (this.currentOptions.list.length + 1), value: this.getRandomString()});
            },
            /**
             *  选项设置删除选项
             * @param index
             */
            onDel(index) {
                if(this.currentOptions.list.length > 2) {
                    this.currentOptions.list.splice(index, 1);
                }
            },
            /**
             * 添加列
             * @param index
             */
            onAddCol(type, index) {
                if(type === 'detail') {
                    if (this.right_forms[index].children.length < 6) {
                        this.right_forms[index].children.push({
                            type: '',
                            title: '',
                            index: '',
                            token: ''
                        })
                    }
                }else {
                    this.right_forms[index].children.map(item => {
                        if(item.length < 6) {
                            item.push({
                                type: '',
                                title: '',
                                index: '',
                                token: ''
                            })
                        }
                    })
                }
            },
            /**
             * 增加行
             */
            onAddRow(index) {
                const len = this.right_forms[index].children[0].length;
                let arr = new Array(len);
                arr.fill({
                    type: '',
                    title: '',
                    index: '',
                    token: ''
                })
                this.right_forms[index].children.push(arr);

            },
            /**
             * 删除表单
             * @param index
             */
            onDeleteForm(index) {
                this.right_forms.splice(index, 1);
                if(this.right_forms.length <= 0) {
                    this.currentOptions = {};
                }
            },
            onDeleteChildrenForm(index, i) {
                if(this.right_forms[index].children.length > 1) {
                    this.right_forms[index].children.splice(i, 1);
                }
            },
            /**
             * 表格
             * @param e
             * @param index
             * @param rowIndex
             * @param i
             */
            onDropTableChildren(e, index, rowIndex ,i) {
                if(e.preventDefault) {
                    e.preventDefault();
                }
                this.inside = false;
                const text = e.dataTransfer.getData('text/plain');

                const type = text.split(':')[0];
                const title = text.split(':')[1];

                if(['three', 'two', 'table', 'detail', 'employee_change', 'salary_adjust'].indexOf(type) !== -1) {
                    return null;
                }

                this.$set(this.right_forms[index].children[rowIndex], i, {
                    type: type,
                    title: title,
                    placeholder: type === 'describe' ? '描述性文字' : '',
                    token: this.getRandomString(),
                    list: this.makeList(type),
                    draggable: true
                });

                this.clearDrop();
                $(e.target).removeClass('active');
                this.onEdit(type, index,rowIndex, i);
            },
            /**
             * 拖拽后清除原被拖拽元素
             */
            clearDrop() {
                this.right_forms = this.right_forms.filter(item => {
                    return !item.token || item.token != this.token;
                });
                this.right_forms.forEach((item, index) => {
                    if(item.type === 'three' || item.type === 'two' || item.type === 'detail') {
                        item.children.forEach((val, i) => {
                            if(val.token === this.token) {
                                this.right_forms[index].children[i] = {
                                    type: '',
                                    title: '',
                                    index: '',
                                    token: ''
                                }
                            }
                        })
                    }else if(item.type === 'table') {
                        item.children.forEach((row, rIndex) => {
                            row.forEach((val, i) => {
                                if(val.token === this.token) {
                                    this.right_forms[index].children[rIndex][i] = {
                                        type: '',
                                        title: '',
                                        index: '',
                                        token: ''
                                    }
                                }
                            });
                        });
                    }
                });
                this.right_forms = this.right_forms.filter(item => {
                    return item.type !== '';
                })
            },
            /**
             *
             * @param type
             * @returns {*}
             */
            makeList(type) {
                return ['radio', 'checkbox', 'select'].indexOf(type) !==  -1  ? [{label: '选项1', value: this.getRandomString() + 1},{label: '选项2', value: this.getRandomString() + 2},{label: '选项3', value: this.getRandomString() + 3}] : '';
            },
            /**
             * 获取单据值
             * @param val1 type
             * @param val2 key(token)
             * @param val3 value
             * @param val4 当前数据在right_forms中 的 index
             * @param val5 detail children
             */
            getData(val1, val2, val3, val4, val5) {
                if(['number', 'money'].indexOf(val1) !== -1) {
                    val3 = parseFloat(val3);
                }
                if(val4 !== undefined) {
                    this.testData[val2] = val3;
                    this.doSumTotal(val2, val4)
                } else {
                    this.testData[val2] = val3;
                }
                this.doMath(val4, val5);
            },
            /**
             * val1 token
             *  val2 index
             * 明细表列合计
             * */
            doSumTotal(val1, val2) {
                let sum = 0;
                if(val1 !== undefined) {
                    const token = val1.substr(0, 13);
                    if(this.right_forms[val2].totals && this.right_forms[val2].totals.indexOf(token) !== -1) {
                        for(let key in this.testData) {
                            if(key.indexOf(token) !== -1 && key.length === 14) {
                                sum += this.testData[key];
                            }
                        }

                        sum = isNaN(sum) ? '' : sum;
                        this.testData[token + '_total'] = sum;
                        this.$refs['preview_form'][val2].setTotal(token, sum);
                    }
                }
            },
            /**
             * 删除明细表行
             * @param n
             * @param token
             */
            onDeleteDetail(n,  tokens, index) {
                tokens.forEach(item => {
                     delete this.testData[item + n];
                });
                this.right_forms[index].children.forEach(item => {
                    this.doSumTotal(item.token, index);
                });

            },

            /**
             * 生成计算式
             * @param val1 title
             * @param val2 token
             */
            onAddMathItem(val1, val2) {
                this.mathFormulaArr.push(val1);
                this.mathFormulaTokenArr.push(val2 !== undefined ? 'that.testData.' + val2 : val1);
                this.makeFormulaString();
            },
            cancelMathItem() {
                if(this.mathFormulaArr.length > 0) {
                    this.mathFormulaArr.pop();
                    this.mathFormulaTokenArr.pop();
                    this.makeFormulaString();
                }
            },
            clearMathFormula() {
                this.mathFormulaArr = [];
                this.mathFormulaTokenArr = [];
                this.makeFormulaString();
            },
            /**
             * 计算式数组转字符串
             */
            makeFormulaString() {
                this.mathFormula = this.mathFormulaArr.join(' ');
                this.currentOptions.math_formula = this.mathFormulaTokenArr.join(' ');
                this.currentOptions.math_formula_arr = this.mathFormulaTokenArr;
            },
            /**
             * 运算控件自动运算
             */
            doMath(index,children) {
                const that = this;
                if(index !== undefined && children !== undefined) {
                    this.doDetailMath(index,children);
                }

                this.right_forms.forEach((item, index) => {
                    if(item.type === 'math') {
                        const result = eval(item.math_formula);
                        this.testData[item.token] = isNaN(result) ? '' : result;
                        this.$refs['preview_form'][index].$refs['form-item-preview'].setData(this.testData[item.token]);
                    }else if(item.type === 'detail') {
                        //TODO 明细表外触发计算
                        const _children = this.detailData[index];
                        this.doDetailMath(index, _children);
                    }
                });
            },
            doDetailMath(index, children) {
                const that = this;
                children.forEach((row, rowIndex) => {
                    row.forEach((item, i) => {
                        if(item.type === 'math') {
                            const result = eval(item.math_formula);
                            this.testData[item.token] = isNaN(result) ? '' : result;
                            this.$refs['preview_form'][index].$refs['form-item-preview'][rowIndex * row.length + i].setData(this.testData[item.token]);
                        }
                    });
                });
            },
            getRandomString() {
                return new Date().getTime().toString().split('').map(val => this.strArr[val]).join('');
            },
            /**
             *  获取明细表改造后children数据
             * @param index
             * @param children
             */
            getDetailMath(index, children) {
                this.detailData[index] = children;
            }
        },
        computed: {
            totalsArr() {
                return this.currentIndex !== '' && !!this.right_forms[this.currentIndex].children ? this.right_forms[this.currentIndex].children.filter(item => ['money', 'number', 'math'].indexOf(item.type) !== -1) : [];
            },
            mathArr() {
                let arr = [];
                arr = this.right_forms.filter(item => ['number', 'money'].indexOf(item.type) !== -1);
                this.right_forms.forEach(item => {
                    if(!!item.children) {
                        if(item.type !== 'table') {
                            arr = arr.concat(item.children.filter(val => ['number', 'money'].indexOf(val.type) !== -1));
                        }else {
                            item.children.forEach(row => arr = arr.concat(row.filter(val => ['number', 'money'].indexOf(val.type) !== -1)));
                        }

                    }
                });
                return arr;
            }
        },
        watch: {
        }
    };
</script>